﻿<style>
    dl {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 1.5rem;
        align-items: center;
    }

    dd {
        margin: 0;
    }
</style>

<dl>
    <dt>Parameters: <code>Count="0"</code>, <code>ShowWhen</code> not specified. Result: </dt>
    <dd>
        <FluentCounterBadge Count="0" Appearance="Appearance.Accent">
            <FluentButton>
                <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="@Color.Neutral" />
            </FluentButton>
        </FluentCounterBadge>
    </dd>
    <dt>Parameters: <code>Count="0"</code>, <code>ShowWhen="@@(Count => Count >= 0)"</code>. Result: </dt>
    <dd>
        <FluentCounterBadge Count="0" BackgroundColor="@Color.Error" Color="Color.Fill" ShowWhen="@(Count => Count >= 0)">
            <FluentButton>
                <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="@Color.Neutral" />
            </FluentButton>
        </FluentCounterBadge>
    </dd>
    <dt>Parameters: <code>Count="-4"</code>, <code>ShowWhen="@@(Count => Count &lt;= 0)"</code>. Result: </dt>
    <dd>
        <FluentCounterBadge Count="-4" BackgroundColor="@Color.Error" Color="Color.Fill" ShowWhen="@(Count => Count <= 0)">
            <FluentButton>
                <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="@Color.Neutral" />
            </FluentButton>
        </FluentCounterBadge>
    </dd>
    <dt>Parameters: <code>Count="-4"</code>, <code>ShowWhen="@@(Count => Count > 3)"</code>. Result: </dt>
    <dd>
        <FluentCounterBadge Count="-4" BackgroundColor="@Color.Error" Color="Color.Fill" ShowWhen="@(Count => Count > 3)">
            <FluentButton>
                <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="@Color.Neutral" />
            </FluentButton>
        </FluentCounterBadge>
    </dd>
    <dt>Parameters: <code>Count="4"</code>, <code>ShowWhen="@@(Count => Count > 3)"</code>. Result: </dt>
    <dd>
        <FluentCounterBadge Count="4" BackgroundColor="@Color.Error" Color="Color.Fill" ShowWhen="@(Count => Count > 3)">
            <FluentButton>
                <FluentIcon Value="@(new Icons.Regular.Size24.Alert())" Color="@Color.Neutral" />
            </FluentButton>
        </FluentCounterBadge>
    </dd>
</dl>
